<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d</title>
<style>
@keyframes rotates{
	0%{
		transform:rotateX(0deg) rotateY(0deg);
		}
	100%{
		transform:rotateX(360deg) rotateY(360deg);
		}
	}
@keyframes bgcolor{
	from{background-color:#09F;}
	to{background-color:#FF0;}
	}
html{
	 background: url(9999.jpg);
	/*background:linear-gradient(#fff 0%,#000 80%);*/
	height:100%;
	}
.wrap{
	margin-top:400px;/*盒子到顶部的距离*/
	margin-right: 150px;
	perspective:1000px;/*定义元素与视图距离（子元素获得透视效果）*/
	}
.cube{
	width:200px;
	height:200px;
	margin:auto;
	position:relative;
	transform-style:preserve-3d;/*transform-style---转换preserve-3d--子元素表示3D空间；*/
	/*transform:rotateX(-30deg) rotateY(-70deg);rotate()旋转*/
	animation:rotates 20s infinite linear;}
.cube > div{
	width:100%;
	height:100%;
	position:absolute;
	opacity:on;/*透明度 一般用.9来表示*/
	border:1px solid #fff;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	color:#fff;
	line-height:200px;
	transition: transform .2s ease-in;
	}
.cube > span{
	width:100px;
	height:100px;
	display:block;
	border:1px solid #000;
	position:absolute;
	font-size:18px;
	font-weight:bold;
	color:#FF1493; /*字体颜色  我爱你*/
	background-color:#999;
	text-align:center;
	line-height:100px;
	top:50px;
	left:50px;
	}
.out-front{
	transform:translateZ(100px);
	background-color: aqua;
	
	}
.wrap:hover .out-front{
	transform:translateZ(200px);
	}
.out-back{
	background-color: #FFFF00;
	transform:translateZ(-100px) rotateY(180deg);
	}
.wrap:hover .out-back{	
	transform:translateZ(-200px) rotateY(180deg);
	}
	
.out-left{
	background-color: chartreuse;
	transform:translateX(100px) rotateY(90deg);
	}
.wrap:hover .out-left{
	transform:translateX(200px) rotateY(90deg);
	}
.out-right{
	background-color: blueviolet;
	transform:translateX(-100px) rotateY(90deg);
	}
.wrap:hover .out-right{
	transform:translateX(-200px) rotateY(90deg);
	}
.out-top{
	background-color: coral;
	transform:translateY(-100px) rotateX(90deg);
	}
.wrap:hover .out-top{
	transform:translateY(-200px) rotateX(90deg);
	}
.out-bottom{
	background-color: deeppink;
	transform:translateY(100px) rotateX(90deg);
	}
.wrap:hover .out-bottom{
	transform:translateY(200px) rotateX(90deg);
	}
.in-front{
	transform:translateZ(50px);
	}
.in-back{
	transform:translateZ(-50px) rotateY(180deg);
	}
.in-left{
	transform:translateX(50px) rotateY(90deg);
	}
.in-right{
	transform:translateX(-50px) rotateY(90deg);
	}
.in-top{
	transform:translateY(-50px) rotateX(90deg);
	}
.in-bottom{
	transform:translateY(50px) rotateX(90deg);
	}
</style>
</head>

<body>
 <div class="wrap">
 	<div class="cube">
    		<div class="out-front">
    			<img src="IMG_1708.JPG" width="200px" height="200px"/>
    		</div>
            <div class="out-back">
            	<img src="psb.jpg" width="200px" height="200px"/>
            </div>
            <div class="out-left">
            	<img src="psb (2).jpg" width="200px" height="200px"/>
            </div>
            <div class="out-right">
            	<img src="psb (1).jpg" width="200px" height="200px"/>
            </div>
            <div class="out-top">
            	<img src="IMG_1588.JPG" width="200px" height="200px"/>
            </div>
            <div class="out-bottom">
            	<img src="IMG_1618.JPG" width="200px" height="200px"/>
            </div>
            
            <span class="in-front">洪</span>
            <span class="in-back">永</span>
            <span class="in-left">欣</span>
            <span class="in-right">我</span>
            <span class="in-top">爱</span>
            <span class="in-bottom">你</span>
    </div>
 </div>
</body>
</html>
